import React from "react";
import { PercentLineWrap } from "./styles";
import type { PercentLineProps } from "./interface";
import { ProgressLine } from "./Line";

const PercentLine = (props: PercentLineProps) => {
  const {
    size,
    strokeColor,
    style,

    backgroundColor = "#899DBF",
  } = props;
  const w = Array.isArray(size) ? size[0] : size;
  const h = Array.isArray(size) ? size[1] : 3;
  const strokeColorNotArray = Array.isArray(strokeColor)
    ? strokeColor[0]
    : strokeColor;

  return (
    <PercentLineWrap
      w={w}
      h={h}
      role="progressbar"
      backgroundColor={backgroundColor}
      style={style}
    >
      <ProgressLine {...props} strokeColor={strokeColorNotArray} />
    </PercentLineWrap>
  );
};

export default PercentLine;

export * from "./interface";
